<script setup>
import {onMounted, watch, ref, defineEmits, defineProps} from "vue";
import {Calendar, Location, Picture} from "@element-plus/icons-vue";
import axios from "axios"

const emit = defineEmits(['parentProp']);
const numberForBodyIn = ref([])
const props = defineProps({
  fourth: {
    type: String,
  },
  chooseData: {
    type: Object,
  },
})
const sendData = ref({
  code: '0',
  fourth: '推荐排序',
  city: '全国',
  classify: '全部',
  time: '全部',
})
onMounted(() => {
  axios.post("http://localhost:8080/classify/find", sendData.value).then((res) => {
    numberForBodyIn.value = res.data;
    emit('parentProp', numberForBodyIn.value.length)
  })
})
watch(() => props.fourth, () => {
  sendData.value.fourth = props.fourth;
  axios.post("http://localhost:8080/classify/find", sendData.value).then((res) => {
    numberForBodyIn.value = res.data;
    emit('parentProp', numberForBodyIn.value.length)
  })
});
watch(() => props.chooseData.city, () => {
  sendData.value.city = props.chooseData.city;
  axios.post("http://localhost:8080/classify/find", sendData.value).then((res) => {
    numberForBodyIn.value = res.data;
    emit('parentProp', numberForBodyIn.value.length)
  })
})
watch(() => props.chooseData.classify, () => {
  sendData.value.classify = props.chooseData.classify;
  axios.post("http://localhost:8080/classify/find", sendData.value).then((res) => {
    numberForBodyIn.value = res.data;
    emit('parentProp', numberForBodyIn.value.length)
  })
})
watch(() => props.chooseData.time, () => {
  sendData.value.time = props.chooseData.time;
  axios.post("http://localhost:8080/classify/find", sendData.value).then((res) => {
    numberForBodyIn.value = res.data;
    emit('parentProp', numberForBodyIn.value.length)
  })
})
</script>

<template>
  <div class="body">
    <div v-for="(item, index) in numberForBodyIn" class="body-in">
      <div style="margin-top: 25px">
        <el-image style="width: 152px; height: 206px"
                  fit="cover"
                  :src="`http://localhost:8080/${item.photos}`">
          <template #error>
            <div class="error-image">
              <el-icon color="lightgray" size="30">
                <Picture/>
              </el-icon>
            </div>
          </template>
        </el-image>
        <div class="image-tip"><a>{{ item.classify }}</a></div>
      </div>
      <div class="body-in-in">
        <div class="body-in-in-one"><a>{{ item.title }}</a></div>
        <div class="body-in-in-two">
          <p>艺人：<a class="two-name">{{ item.names }}</a></p>
          <p>
            <el-icon class="icon">
              <Location/>
            </el-icon>
            <a>{{ item.city }} | {{ item.address }}</a></p>
          <p>
            <el-icon class="icon">
              <Calendar/>
            </el-icon>
            <a>{{ item.times }}</a></p>
        </div>
        <div class="body-in-in-three">
          <b>{{ item.prices }} <a style="font-size: 12px">元起</a></b>
          <a style="margin-left: 30px;color: gray;font-size: 13px">
            {{ item.states === '1' ? '售票中' : '结束售票' }}</a>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.icon {
  color: deeppink;
  top: 1px;
  margin-right: 2px;
}

.body {
  width: calc(100% - 40px);
  height: 100%;
  margin: 5px auto;
  display: flex;
  flex-direction: column;

  .body-in {
    border-bottom: lightgray 1px dotted;
    width: 100%;
    height: 250px;
    display: flex;
    flex-direction: row;

    .body-in-in {
      display: flex;
      flex-direction: column;
      margin-top: 30px;
      margin-left: 15px;

      .body-in-in-one {
        font-size: 16px;
      }

      .body-in-in-two {
        color: gray;
        font-size: 12px;

        .two-name {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .body-in-in-three {
        margin-top: 66px;

        b {
          color: deeppink;
        }
      }
    }

    .image-tip {
      font-size: 10px;
      width: 42px;
      height: 20px;
      background-color: deeppink;
      color: white;
      border-radius: 3px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      top: -200px;
      left: 10px;
    }
  }
}

.error-image {
  height: 100%;
  width: 100%;
  background-color: whitesmoke;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>